<script setup>
import { ref, onMounted } from 'vue'
import { ElButton, ElCard, ElMessage } from 'element-plus'
import { useCounterStore } from '../stores/counter'
import axios from '../utils/axios'

const counterStore = useCounterStore()
const welcomeMessage = ref('')
const loading = ref(false)

// 模拟获取欢迎信息
const fetchWelcomeMessage = async () => {
  loading.value = true
  try {
    // 由于是模拟环境，这里使用 setTimeout 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    welcomeMessage.value = '欢迎来到 SPZX Admin 管理系统！'
  } catch (error) {
    ElMessage.error('获取欢迎信息失败')
  } finally {
    loading.value = false
  }
}

const handleIncrement = () => {
  counterStore.increment()
}

const handleDecrement = () => {
  counterStore.decrement()
}

const handleReset = () => {
  counterStore.reset()
}

onMounted(() => {
  fetchWelcomeMessage()
})
</script>

<template>
  <div class="home-container">
    <header class="home-header">
      <h1 class="text-3xl font-bold text-primary mb-4">首页</h1>
      <p v-if="loading" class="text-gray-500">加载中...</p>
      <p v-else class="text-gray-700 text-lg">{{ welcomeMessage }}</p>
    </header>

    <div class="home-content grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
      <ElCard class="demo-card">
        <template #header>
          <div class="card-header">
            <span class="text-lg font-semibold">计数器示例</span>
          </div>
        </template>
        
        <div class="card-content text-center py-6">
          <div class="text-4xl font-bold mb-4">{{ counterStore.count }}</div>
          <div class="flex justify-center space-x-4">
            <ElButton type="danger" @click="handleDecrement">
              - 减一
            </ElButton>
            <ElButton type="primary" @click="handleIncrement">
              + 加一
            </ElButton>
            <ElButton @click="handleReset">
              重置
            </ElButton>
          </div>
          <div class="mt-4">
            <p class="text-gray-600">双倍值: {{ counterStore.doubleCount }}</p>
          </div>
        </div>
      </ElCard>

      <ElCard class="demo-card">
        <template #header>
          <div class="card-header">
            <span class="text-lg font-semibold">功能模块</span>
          </div>
        </template>
        
        <div class="card-content">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 hover:shadow-md transition-all cursor-pointer">
              <h3 class="font-medium text-blue-700">用户管理</h3>
              <p class="text-sm text-gray-500">管理系统用户</p>
            </div>
            <div class="bg-green-50 p-4 rounded-lg border border-green-100 hover:shadow-md transition-all cursor-pointer">
              <h3 class="font-medium text-green-700">内容管理</h3>
              <p class="text-sm text-gray-500">管理系统内容</p>
            </div>
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-100 hover:shadow-md transition-all cursor-pointer">
              <h3 class="font-medium text-purple-700">数据分析</h3>
              <p class="text-sm text-gray-500">查看系统数据</p>
            </div>
            <div class="bg-amber-50 p-4 rounded-lg border border-amber-100 hover:shadow-md transition-all cursor-pointer">
              <h3 class="font-medium text-amber-700">系统设置</h3>
              <p class="text-sm text-gray-500">配置系统参数</p>
            </div>
          </div>
        </div>
      </ElCard>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
  padding: 20px;
}

.home-header {
  text-align: center;
  margin-bottom: 30px;
}

.home-content {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-card {
  height: 100%;
}
</style>